<style lang="scss" scoped>
.cms-file {
  :deep td {
    vertical-align: top;
  }
  .list {
    text-align: left;
    padding-left: 10px;
    .el-row {
      margin-bottom: 10px;
      div {
        &:last-child {
          color: #999;
        }
      }
    }
  }
}
</style>
<template>
  <div class="cms-file">
    <!-- 导出 -->
    <el-row class="import_global">
      <el-button type="warning" icon="el-icon-download" size="small" round>
        批量下载
      </el-button>
    </el-row>
    <!-- 预览 -->
    <pdf-com
      src="/20220730152312935163.pdf"
      title="pdf"
      :visibleProp="pdfVisible"
      @close="pdfVisible = false"
    />
    <!-- 查询 -->
    <el-input
      placeholder="搜索名字"
      prefix-icon="el-icon-search"
      v-model="form.user" />
    <div class="table">
      <!-- tabs -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="收货单位" name="first" />
        <el-tab-pane label="消费使用单位" name="second" />
        <el-tab-pane label="境外发货单位" name="third" />
        <el-tab-pane label="申报单位" name="fourth" />
      </el-tabs>
      <!-- 表格列表 -->
      <table-com
        ref="table"
        api="/order/queryList"
        :column="column"
        :params="{}"
        :config="{ getList }"
        @row-click="rowClick"
      >
        <template v-slot="{ prop, row, column }">
          <div class="list" v-if="column.label !== '操作'">
            <template v-if="showList[row.id]">
              <el-row v-for="(item, index) in column.child" :key="index">
                <div>{{ row[prop][item.prop] || '-' }}</div>
                <div>{{ item.label }}</div>
              </el-row>
              <div v-if="prop === 'orderInfo'">
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="$router.push(`/step/order?id=${row.orderInfo.cabinetNo}`)"
                  >编辑</el-button
                >
              </div>
            </template>
            <template v-else>
              <el-row
                v-for="(item, index) in column.child.slice(0, 1)"
                :key="index"
              >
                <div>{{ row[prop][item.prop] || '-' }}</div>
                <div>{{ item.label }}</div>
              </el-row>
            </template>
          </div>
          <template v-else>
            <el-row>
              <el-link
                type="warning"
                @click="$router.push(`/step/order?id=${row.orderInfo.cabinetNo}`)"
                >下载全部</el-link
              >
              <el-link
                type="warning"
                class="ml_10"
                @click="$router.push(`/step/order?id=${row.orderInfo.cabinetNo}`)"
                >查看全部</el-link
              >
            </el-row>
            <el-row>
              <el-link
                type="warning"
                @click="$router.push(`/step/order?id=${row.orderInfo.cabinetNo}`)"
                >文件压缩</el-link
              >
              <el-link
                type="warning"
                class="ml_10"
                @click="$router.push(`/step/order?id=${row.orderInfo.cabinetNo}`)"
                >文件上传</el-link
              >
            </el-row>
          </template>
        </template>
      </table-com>
    </div>
  </div>
</template>

<script>
import PdfCom from '@/components/PdfCom.vue'

export default {
  name: 'CmsFile',
  components: {
    PdfCom
  },
  data() {
    return {
      activeName: 'first',
      form: {
        user: '',
        name: ''
      },
      column: [
        {
          label: '订单',
          prop: 'orderInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '提运号', prop: 'ladingNo' },
            { label: '报关单单号', prop: 'declarationNo' },
            { label: '关税税号', prop: 'tariffNo' },
            { label: '增值税税号', prop: 'vatNo' },
            { label: '启运国', prop: 'startShipmentCountry' },
            { label: '贸易国', prop: 'tradeCountry' },
            { label: '目的国', prop: 'destCountry' }
          ]
        },
        {
          label: '收发货单位',
          prop: 'addressInfo',
          minWidth: '120',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '货物代理人', prop: 'goodsProxy' },
            { label: '货物接收人', prop: 'goodsReceiver' },
            { label: '申报单位名称', prop: 'declareCompanyName' },
            { label: '收货单位名称', prop: 'receiveCompanyName' },
            { label: '发货单位名称', prop: 'deliverCompanyName' },
            { label: '消费单位名称', prop: 'consumeCompanyName' }
          ]
        },
        {
          label: '核销',
          prop: 'cancelVerificationInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '许可证编号', prop: 'licenseNo' }
          ]
        },
        {
          label: '结算',
          prop: 'settlementInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '总关税金额', prop: 'tariffAmount' },
            { label: '总增值税金额', prop: 'addValueTaxAmount' },
            { label: '总税额', prop: 'sumTaxAmount' }
          ]
        },
        {
          label: '文件',
          prop: 'fileInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '文件类型', prop: 'fileType' },
            { label: '', prop: 'fileShowName' }
          ]
        },
        {
          label: '操作',
          slot: true
        }
      ],
      importVisible: false,
      pdfVisible: false,
      showList: []
    }
  },
  methods: {
    onQuery() {
      this.$refs.table.fetch(1)
    },
    rowClick(row) {
      this.$set(this.showList, row.id, !this.showList[row.id])
    },
    getList(list) {
      list.forEach(() => {
        this.showList.push(false)
      })
    }
  },
  mounted() {
    this.onQuery()
  }
}
</script>
